<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
  import echarts from 'echarts';
  import tdTheme from './theme.json';
  import {on, off} from '@/base/util/tools'

  echarts.registerTheme('tdTheme', tdTheme);
  export default {
    name: 'ChartBarAxis',
    props: {
      value: Object,
      text: String,
      subtext: String
    },
    data() {
      return {
        dom: null
      };
    },
    methods: {
      resize() {
        this.dom.resize();
      },
      drawbarChart() {
        let option = {
          title: {
            text: this.value.text,
            padding: [10, 0, 10, 30]
          },
          grid: {
            right: '50%',
            top: '40px',
            width: '50%',
            height: '80%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.value.xAxis,
          },
          yAxis: {
            type: 'value',
          },
          tooltip: {
            trigger: 'axis' // axis   item   none三个值
          },
          series: [
            {
              type: 'bar', // 类型
              legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
              label: {
                // 图形上的文本标签
                show: false,
                position: 'insideTop', // 相对位置
                rotate: 0, // 旋转角度
                color: '#eee'
              },
              itemStyle: {
                // 图形的形状
                color: 'blue'

              },
              barWidth: 40, // 柱形的宽度
              barCategoryGap: '20%', // 柱形的间距
              data: this.value.yAxis
            }
          ]
        };
        this.dom = echarts.init(this.$refs.dom, 'tdTheme');
        this.dom.setOption(option);
        on(window, 'resize', this.resize)
      }
    },
    watch: {
      value: {
        handler() {
          this.drawbarChart();
        },
        deep: true
      }
    },
    activated() {
      this.drawbarChart();
    }
    ,
    mounted() {
      this.$nextTick(() => {
        this.drawbarChart();
      });
    }
    ,
    beforeDestroy() {
      off(window, 'resize', this.resize);
    }
  }
  ;
</script>
